<template>
  <div class="">
    <!-- 内容组件 -->
    <content-template :formData="formData"
                      :searchData="searchData"
                      :tableData="tableData"
                      :getDatas ="getDatas"
                     >
          <div slot="content_top_search">
              <Row type="flex" align="middle">
                <label>申请时间</label>
                <RadioGroup style="margin:0 20px" v-model="time_value" @on-change="handleSelect" type="button">
                    <Radio label="">全部</Radio>
                    <Radio label="1">今天</Radio>
                    <Radio label="1">本周</Radio>
                    <Radio label="1">本月</Radio>
                    <Radio label="2">自定义</Radio>
                </RadioGroup>
                <div v-if="time_value==2" style="margin:10px 0">
                  <DatePicker type="datetime" v-model="start_time" format="yyyy-MM-dd HH:mm:ss" placeholder="起始时间" style="width: 180px;margin-right:10px"></DatePicker>
                  <DatePicker @on-ok="handleSelect" type="datetime" v-model="stop_time" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" style="width: 180px"></DatePicker>
                </div>
              </Row>
          </div>
    </content-template>
  </div>
</template>
<script>
export default {
   data() {
    return {
      time_value:'',
      start_time:'',
      stop_time:'',
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
            
          },
          hasSelect:{
             selectList:[
               {
                 status:'',
                 selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '未审核',
                      label: '未审核',
                      id:1
                    },
                    {
                      value: '已通过',
                      label: '已通过',
                      id:2
                    },
                    {
                      value: '未通过',
                      label: '未通过',
                      id:3
                    },
                 ]
               },
            ]
          }       
        },
      },
      searchData:{  
        searchValue: {  //搜索值
          nickname:''
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          {
            key: 'nickname',
            label: "用户昵称",
          },
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
            {
              title: '头像+昵称',
              key: 'manager_name',
              width:200,
              align: 'center',
              render: (h, params) => {
                if ( params.row.customer_wechat.avatar_url != null) {
                  return h('div', {
                      style: {
                        padding:'10px',
                        display:'flex',
                        alignItems: 'center',
                      },
                    },[
                    params.row.customer_wechat.avatar_url?
                    h('img', {
                      style: {
                        width: '50px',
                        height: '50px',
                        display: 'inline-block',
                        marginRight: '15px',
                        marginLeft: '20px',
                        borderRadius: '50%',
                        cursor: 'pointer'
                      },
                      attrs: {
                        src: params.row.customer_wechat.avatar_url
                      }
                    }):'',
                    h('span',{
                      style: {
                        color: '#505050',
                        fontsize: '14px',
                      },
                    },params.row.customer_wechat.nickname)
                  ])
                }else{
                  return h('div', {
                    style: {
                      width: '95px',
                      height: '32px'
                    }
                  })
                }
              },
            },
            {
              title: '提现金额',
              key: 'amount',
              width:100,
              align: 'center',
              render: (h, params) => {
                return h('div', {
                    style: {
                      padding:'10px',
                      color:'red',
                      fontSize: '16px',
                      fontWeight: 'bold',
                    },
                  },'￥' + params.row.amount)
              },
            },
            {
              title: '备注',
              key: 'content',
              align: 'center',
              render: (h, params) => {
                return h('div', {
                    style: {
                      padding:'10px',
                      fontSize: '16px',
                    },
                  }, params.row.content?params.row.content:'-')
              },
            },
            {
              title: '申请时间',
              width:180,
              key: 'create_time',
              align: 'center',
            },
            {
              title: ' 订单状态',
              width:180,
              align: 'center',
              render: (h, params) => {
              return h(
                'div',
                params.row.status == 1 
                  ? '未审核'
                  : params.row.status == 2
                  ? '已通过'
                  : params.row.status == 3
                  ? '未通过'
                  : '未知'
              )}
            },
            {
              title: '操作',
              key: 'action',
              width: 250,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  params.row.status == 1 ?
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.handleVerify(params.index ,'success')
                      }
                    }
                  }, '通过提现'):'',
                  params.row.status == 1 ?
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.handleVerify(params.index,'error')
                      }
                    }
                  }, '拒绝提现'):'',  
                  params.row.status == 2 || params.row.status == 3 ?
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.handleDetail(params.index)
                      }
                    }
                  }, '查看详情'):''    
                ]);
              }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:10,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    getDatas(){
      let params = {
        page:this.tableData.page,
        per_page:this.tableData.per_page,
      }
      this.$api.getWithdrawalApply(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    handleSelect(){
      this.getDatas()
    },
    handleVerify(index,tpye){
      let params = {
        withdrawal_apply_id: this.tableData.data[index].withdrawal_apply_id,
        status: tpye == 'success' ? 2 : 3
      }
      this.$api.statusWithdrawalApply(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              switch(tpye){
                case 'success':
                  this.$Notice.success({
                        title: '通过申请',
                        desc:  '你通过了用户：' + this.tableData.data[index].customer_wechat.nickname + '的提现申请'
                  });
                  break;
                case 'error':
                  this.$Notice.success({
                        title: '拒绝申请',
                        desc:  '你拒绝了用户：' + this.tableData.data[index].customer_wechat.nickname + '的提现申请'
                  });
                  break;
                default:
                  console.log('其他')
              };
              this.getDatas();
            }
      })
    },
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
